<template>
    <teleport :to='teleport' v-if="showFlag">
        <el-dialog v-model="showFlag" custom-class="user-dialog" :title="title" :show-close="true" :close-on-press-escape="false" :close-on-click-modal="false" @closed="close" :width="width">
            <div style="max-height:60vh;overflow:auto;padding:0 12px;"><slot/></div>
            <template #footer v-if="showBtn">
                <div class="dialog-footer">
                <el-button size="small" @click="close">取 消</el-button>
                <el-button size="small" type="primary" @click="confirm" :disabled="btnDisabled">确 定</el-button>
                </div>
            </template>
        </el-dialog>
    </teleport>
</template>
<script setup>
    import { ref,defineProps,defineEmits,watch} from 'vue';
    const props = defineProps({
        title:String,
        teleport:{
            type:String,
            default:()=>'.admin-box'
        },
        show:{
           type:Boolean,
           default:false 
        },
        showBtn:{
           type:Boolean,
           default:true 
        },
        btnDisabled:{
           type:Boolean,
           default:false 
        },
        width:String 
        
    })
    const emit = defineEmits(['close','update:show','confirm'])

    const showFlag = ref(props.show)

    const close = ()=>{
        showFlag.value = false
        emit('update:show', false)
        emit('close')
    }
    const confirm = ()=>{
        emit('confirm')
    }
</script>
<style lang="scss">
    .user-dialog{
        max-width: 1100px;
    }
</style>